<template>
  <div class="reviewArtWork">
    <page-template>
      <div slot="title">
        创作审核
      </div>

      <div
        slot="content"
        class="content"
      >
        <crud-template
          ref="table"
          style="margin-top:20px"
          :loading="tableDataLoading"
          :total="tableDataTotal"
          :table-data="tableData"
          :table-option="tableOptions"
          @pagination-change="onPaginationChange"
        >
          <template #account="{row}">
            <div>
              <p>创作者昵称: {{ row.nickName }}</p>
              <p>创作者账号:{{ row.account }}</p>
            </div>
          </template>
          <template #ipfsAddr="{row}">
            <el-image
              v-if="row.subPicture"
              style="width:50px;height:50px; object-fit: contain;"
              :src="row.subPicture"
              fit="fit"
              @click="$refs.checkVideo.open(row.ipfsAddr)"
            ></el-image>
            <el-image
              v-else
              style="width:50px;height:50px; object-fit: contain;"
              :preview-src-list="[imgUrl(row.ipfsAddr)]"
              :src="imgUrl(row.ipfsAddr)"
              fit="fit"
            ></el-image>
          </template>
          <template #createTime="{row}">
            {{ row.createTime | dateFormate }}
          </template>
          <template #cardName="{row}">
            {{ row.cardName }}
          </template>
          <template #description="{row}">
            {{ row.description }}
          </template>
          <template #menu="{row}">
            <el-button
              type="text"
              @click="reviewArtWork(1, row)"
            >
              审核通过
            </el-button>
            <el-button
              style="color:red"
              type="text"
              @click="reviewArtWork(2, row)"
            >
              审核拒绝
            </el-button>
          </template>
        </crud-template>
      </div>
    </page-template>
    <check-video ref="checkVideo"></check-video>
  </div>
</template>

<script lang="ts">
import BaseCurd from '@/models/baseCrud'
import ICrud from '@/models/crud'
import { SearchParam } from '@/models/searchParams'
import { TableOptions } from '@/models/tableOptions'
import { tableOptions } from './tableOption'
import { Component, Vue } from 'vue-property-decorator'
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import PageTemplate from '@/components/PageTemplate/index'
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import CrudTemplate from '@/components/CrudTemplate/index'
import { getReviewWorkList, reviewArtWork } from '@/api/reviewWork'
import { UserModule } from '@/store/modules/user'
import { dayAgoDate } from '@/utils/date'
import { REQ_SUCCESS_CODE } from '@/constant/global'
import CheckVideo from './components/CheckVideo.vue'

@Component({
  components: {
    PageTemplate,
    CrudTemplate,
    CheckVideo
  },
  filters: {
    dateFormate(val: any) {
      return dayAgoDate(val)
    }
  }
})
export default class Page extends BaseCurd implements ICrud {
  title?: string | undefined
  tableOptions: TableOptions = tableOptions
  defSearchOptions: SearchParam[] = []

  get userInfo() {
    return UserModule.userInfo
  }

  async fetchTableData(searchParams: any) {
    const res = await getReviewWorkList({
      page: searchParams.current - 1,
      pageSize: searchParams.size
    })
    if (res.data) {
      this.tableData = res.data.list
      this.tableDataTotal = res.data.totalPage
    }
    console.log(res)
  }

  get imgUrl() {
    return (url: any) => {
      return `${process.env.VUE_APP_BASE_API}/compress/ipfs/get?ipfshash=${url}`
    }
  }

  reviewArtWork(type: any, row: any) {
    this.$confirm(`是否确认${type === 2 ? '拒绝' : '通过'}审核?`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      beforeClose: async(action, instance, done) => {
        if (action === 'confirm') {
          instance.confirmButtonLoading = true
          const res: any = await reviewArtWork({
            nftCardId: row.nftCardId,
            type,
            userId: row.userId
          })
          if (res.code === REQ_SUCCESS_CODE) {
            instance.confirmButtonLoading = false
            done()
            this.$message.success('操作成功')
            this.getTableData()
          } else {
            instance.confirmButtonLoading = false
            // done()
          }
        } else {
          done()
        }
      }
    })
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-image__preview {
  object-fit: contain;
}
::v-deep .el-image__inner {
  object-fit: contain;
  cursor: pointer;
}
</style>
